<template>
  <div class="cate">
    <div class="cate_hander">
      <h1 class="cate_title">品类管理 -- 添加品类</h1>
    </div>
    <div class="cate_content">
      <el-form label-position="top" label-width="80px" :model="formLabelAlign">
        <el-form-item label="所属品类">
          <!-- <el-select v-model="formLabelAlign.region" placeholder="/所有">
            <el-option label="/所有/" value="shanghai"></el-option>
            <el-option label="/所有/加多宝" value="beijing"></el-option>
          </el-select> -->
          <el-select v-model="formLabelAlign.region"  @change="regionChange" placeholder="/所有">
            <el-option
              v-for="(item,index) in  list"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类名称">
          <el-input placeholder="请输入品类名称" v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addcategory,category1 } from "../../request/http";

export default {
  data() {
    return {
      region1list:[],
      list:[],
      formLabelAlign: {
        region: "",
        name: ""
      }
    };
  },
  created(){
      category1().then(res => {
        this.region1list = res.data.data;
        // console.log(this.region1list)
        this.$nextTick(function(){
          for (let i = 0; i < this.region1list.length; i++) {
            this.list[i]= "/所有/"+this.region1list[i].name
          }
          console.log(this.list)
        })
        
    });
  },
  methods: {
    regionChange(v) {
      console.log(v)
      console.log(v.substring(4,v.size))
      this.region1list.map((item, i) => {
        if (item.name === v) {
          addcategory({categoryName: this.formLabelAlign.name }).then(res => {
            console.log(res.data);
            this.$message({
              message: `恭喜你,${res.data.data}`,
              type: "success"
            });
          this.$router.push("/product/index/cate")
          })
        }
      });
    },
    onSubmit() {
      console.log(this.formLabelAlign)
      console.log(this.region1list)
      // 添加一级品类
      // if (condition) {

      //    addcategory({categoryName: this.formLabelAlign.name }).then(res => {
      //     console.log(res.data);
      //     this.$message({
      //       message: `恭喜你,${res.data.data}`,
      //       type: "success"
      //     });
      //     this.$router.push("/product/index/cate")
      //   });
      // } 
      // // 添加二级品类
      // else {
      //   addcategory({parentId:v.id, categoryName: this.formLabelAlign.name }).then(res => {
      //     console.log(res.data);
      //     this.$message({
      //       message: `恭喜你,${res.data.data}`,
      //       type: "success"
      //     });
      //     this.$router.push("/product/index/cate")
      //   });
      // }
      
    }
  }
};
</script>


<style lang="scss" scoped>
@import "@/Scss/index.scss";
.cate_content {
  @include Wm(95%);
}
.cate_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cate_title {
  display: inline-block;
  font-weight: normal;
}
.cate {
  @include Wm(95%);
}
</style>